import {
  openSchemaForm,
  OpenSchemaFormProvider,
  SchemaForm,
} from "@/components/schema-form";
import { Button } from "@/components/ui/button";
import { createFileRoute } from "@tanstack/react-router";
import { toast } from "sonner";

export const Route = createFileRoute("/examples/form/")({
  component: RouteComponent,
});

function RouteComponent() {
  return (
    <div className="p-4">
      <SchemaForm
        className="space-y-3"
        fieldConfigs={[
          {
            name: "firstName",
            label: "First Name",
            component: "Input",
          },
          {
            name: "age",
            label: "Age",
            component: "Input",
            required: true,
            rules: {
              pattern: {
                value: /^\d+$/,
                message: "Age must be a number",
              },
            },
          },
        ]}
        defaultValues={{ firstName: "John", age: 30 }}
        onSubmit={(values) => {
          toast.success(
            "Form submitted successfully!" + JSON.stringify(values)
          );
        }}
      >
        <div className="">
          <Button type="submit">提交</Button>
        </div>
      </SchemaForm>
      <OpenSchemaFormProvider />
      <Button
        onClick={() => {
          openSchemaForm({
            title: "hello",
            fieldConfigs: [
              {
                name: "firstName",
                label: "First Name",
                component: "Input",
              },
              {
                name: "age",
                label: "Age",
                component: "Input",
                required: true,
                rules: {
                  pattern: {
                    value: /^\d+$/,
                    message: "Age must be a number",
                  },
                },
              },
            ],
            async onSubmit(data) {
              await new Promise((resolve) => setTimeout(resolve, 1000));
              toast.success(
                "Form submitted successfully!" + JSON.stringify(data)
              );
            },
          });
        }}
      >
        弹窗
      </Button>
    </div>
  );
}
